<template>
    <div class="app-container">
        <el-row>
            <el-col :span="24" class="card-box">
                <el-card>
                    <searchForm @init="init" :searchData="searchData" :searchItem="searchItem"></searchForm>
                </el-card>
            </el-col>
            <el-col :span="24" class="card-box">
                <el-card>
                    <my-table
                    :columns="columns"
                        :showIndex="true"
                        :data="tableData"
                        :loading="table_loading"
                        :pagination="pagination"
                        :cellStyle="{ padding: '6px 0' }"
                        @currentChange="currentChange"
                        @handleSizeChange="handleSizeChange"
                    >
                        <template #off="slotProps">
                            <el-text class="mx-1" type="primary" v-if="slotProps.callback.row.off == 0">已绑定</el-text>
                            <el-text class="mx-1" v-if="slotProps.callback.row.off == 1">未绑定</el-text>
                        </template>
                        <template #operation="slotProps">
                            <el-popconfirm
                            
                                title="该user_id已绑定，确定要将其解除绑"
                                @confirm="handleDelete(slotProps.callback.row)"
                            >
                                <template #reference>
                                    <el-button  link type="primary" :disabled="slotProps.callback.row.off == 1" size="small">解除绑定</el-button>
                                </template>
                            </el-popconfirm>
                        </template>
                    </my-table>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script setup name="productPackage">
import myTable from "@/components/common/table.vue"
import searchForm from "@/components/common/searchForm.vue"
import { getUserBindDevice,ylLevelUserDeviceUserBindDevice } from "@/api/api";
import { getTableData } from '@/mixins/mixins';
const columns = ref([
    {
        label: "设备蓝牙地址",
        prop: "bluetoothName"
    },
    {
        label: "deviceMac",
        prop: "deviceMac",
    },
    {
        label: "deviceId",
        prop: "deviceId",
    },
    {
        label: "userId",
        prop: "userId",
    },
    {
        label: "操作",
        prop: "",
        width: 120,
        align: "left",
        slot: "operation"
    }
])
const searchItem = ref([
    {
        type: "input",
        label: "设备蓝牙地址",
        prop: "bluetoothName",
        placeholder: "请输入设备蓝牙地址"
    },
])
const searchData = ref({
    bluetoothName: "",
})
//hook
const {
    tableData,
    pagination,
    table_loading,
    init,
    handleSizeChange,
    currentChange,
} = getTableData(getUserBindDevice)
const handleDelete = (row) => {
    ylLevelUserDeviceUserBindDevice({ id:row.id }).then(() => {
            init();
        });
    }


init()
</script>
